<template>
    <!-- 
        Teleport可以将组件渲染到网页当中的指定位置
            to：要渲染的地方(选择器)
    -->
    <Teleport to="body">
        <div :="$attrs" class="mask" v-show="props.isShow" @click.self="$emit('hide')">
            <slot></slot>
        </div>
    </Teleport>
</template>

<script setup lang="js">
const props = defineProps(["isShow"])
const emits = defineEmits(["hide"])
</script>
<style lang="css" scoped>
.mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9999;
}
</style>